<template>
    <div class="date-time">
        <div class="date-time-wrap">
            <div class="date-time-head clearfix">
                <span class="cancel left">取消</span>
                <span class="sure right">确定</span>
            </div>
            <div class="date-time-bottom">
                <div class="bottom-tit">
                    <span>年</span>
                    <span>月</span>
                    <span>日</span>
                    <span>时</span>
                    <span>分</span>
                    <span>秒</span>
                </div>
                <ul>
                    <li>
                        <div class="plus" @click="addCount('year')">+</div>
                        <div class="year common-inp">
                            <input type="tel" name="" v-model="year" id="" />
                        </div>
                        <div class="del" @click="delCount('year')">-</div>
                    </li>
                    <li>
                        <div class="plus" @click="addCount('month')">+</div>
                        <div class="month common-inp">
                            <input type="tel" name="" v-model="month" id="" />
                        </div>
                        <div class="del">-</div>
                    </li>
                    <li>
                        <div class="plus" @click="addCount('day')">+</div>
                        <div class="day common-inp">
                            <input type="tel" name="" v-model="day" id="" />
                        </div>
                        <div class="del">-</div>
                    </li>
                    <li>
                        <div class="plus" @click="addCount('hour')">+</div>
                        <div class="hour common-inp">
                            <input type="tel" name="" v-model="hour" id="" />
                        </div>
                        <div class="del">-</div>
                    </li>
                    <li>
                        <div class="plus" @click="addCount('min')">+</div>
                        <div class="mint common-inp">
                            <input type="tel" name="" v-model="min" id="" />
                        </div>
                        <div class="del">-</div>
                    </li>
                    <li>
                        <div class="plus" @click="addCount('sec')">+</div>
                        <div class="sec common-inp">
                            <input type="tel" name="" v-model="sec" id="" />
                        </div>
                        <div class="del">-</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            year:"2016",
            month:"05",
            day:"03",
            hour:"12",
            min:"52",
            sec:"09",
        }
    },
    watch: {
       year(val){
           let date = new Date();
           let year = date.getFullYear();
           if(val < 2017){
               this.year = 2017;
           }
       },
       month(val){
           if()
       }
    },
    methods: {
        addCount(type){
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            switch (type) {
                case "year":
                    this.year++;
                    if(this.year > year){
                        this.year = year;
                    }
                    break;
                case "month":
                    this.month++;
                    break;
                case "day":
                    this.day++;
                    break;
                case "hour":
                    this.hour++;
                    break;
                case "min":
                    this.min++;
                    break;
                case "sec":
                    this.sec++;
                    break;
                default:
                    break;
            }
        },
        delCount(type){
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            switch (type) {
                case "year":
                    this.year--;
                    if(this.year > year){
                        this.year = year;
                    }
                    break;
                case "month":
                    this.month--;
                    break;
                case "day":
                    this.day--;
                    break;
                case "hour":
                    this.hour--;
                    break;
                case "min":
                    this.min--;
                    break;
                case "sec":
                    this.sec--;
                    break;
                default:
                    break;
            }
        }
    },
    mounted() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();
        this.year = year;
        this.month = month;
        this.day = day;
        this.hour = hour;
        this.min = min;
        this.sec = sec;
    }
}
</script>

<style lang="scss" scoped>
@import "./dateTime.scss";
</style>
